<!--
 * @Author: your name
 * @Date: 2021-07-18 10:24:27
 * @LastEditTime: 2021-07-18 11:06:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mu-gridsome\src\templates\posts3.vue
-->
<template>
    <Layout>
        <div>
            <h1>{{$page.post.title}}</h1>
            <div>{{$page.post.content}}</div>
            <!-- <ul> -->
            <!-- <li v-for="post in $page.posts.edges" :key="post.node.id">
                  <g-link to='/'>
                      {{ post.node.title }}
                  </g-link>
              </li> -->
            <!-- </ul> -->
        </div>
    </Layout>
</template>
<!-- $id 变量 对应的就是路由的动态参数 -->
<page-query>
    query ($id:ID!){
    post (id:$id){
    id
    title
    content
    }
    }

</page-query>

<script>
    export default {
        name: 'post3',
        metaInfo() {
            return {
                title: this.$page.post.id
            }
        }
    }
</script>